<script setup>
import { ref, watch } from 'vue';
import ErrorDetail from "./ErrorDetail.vue"

const props = defineProps({
    records: Array,
    currentPage: Number,
    countPerPage: Number,
    total: Number
})
const emit = defineEmits("goPrev", "goNext", "selectClient")
const status = ref({});

watch(() => props.records, (to) => {
    status.value = {};
})

function selectClient(client) {
    emit("selectClient", client)
}

function goPrev() {
    emit("goPrev")
}

function goNext() {
    emit("goNext")
}

function countParErrors(errors) {
    return Object.keys(errors).length
}
</script>

<template>
    <table>
        <thead>
            <tr>
                <th>Client</th>
                <th>URL</th>
                <th>调用方法</th>
                <th>状态码</th>
                <th>是否合法访问</th>
                <th>参数错误</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="(data, index) in records" :key="index">
                <tr>
                    <td>
                        <a href="javascript:void(0);" @click="selectClient(data.Client)">{{ data.Client }}</a>
                    </td>
                    <td>{{ data.Url }}</td>
                    <td>{{ data.Method }}</td>
                    <td>{{ data.StatusCode }}</td>
                    <td>
                        <span v-if="data.Legal" class="success">合规</span>
                        <span v-else class="danger">不合规</span>
                    </td>
                    <td v-if="data.ParameterErrors"><a href="javascript:void(0);" class="danger"
                            @click="status[index] = !status[index]">
                            {{ countParErrors(data.ParameterErrors) }}个参数有错</a></td>
                    <td v-else>无</td>
                </tr>
                <tr v-if="status[index]" class="detail">
                    <td colspan="6">
                        <error-detail :errors="errs" v-for="errs, index in data.ParameterErrors" :key="index">
                        </error-detail>
                    </td>
                </tr>
            </template>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">
                    <div class="flex end mr-1">
                        <button @click="goPrev" v-if="currentPage > 0" variant="success">&lt;</button>
                        <span class="current-page">{{ currentPage + 1 }}</span>
                        <button @click="goNext" v-if="total - currentPage * countPerPage > countPerPage"
                            variant="success">&gt;</button>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
</template>

<style lang="scss" scoped>
.current-page {
    display: block;
    background: lightgray;
    width: 25px;
    line-height: 2em;
    color: white;
    background-color: var(--logcat-success-color);
    border-left: 1px solid white;
    height: calc(2em + 2px);
    border-right: 1px solid white;
}

tr.detail {
    // padding: 10px;

    >td {
        >* {
            border-radius: 10px;
            background: #f9f9f9;
            margin: 10px;
            padding: 10px 50px;
        }
    }
}
</style>